%section{ class: section_classes, id: @id, data: (@testid ? { testid: @testid } : {}) }
  - if callout?
    = callout
  .gl-flex.gl-justify-between.gl-items-start.gl-gap-x-3.gl-pt-5
    .gl-shrink-0.gl-px-2.gl-py-0.-gl-mr-3{ class: "@sm/panel:gl-p-2 @sm/panel:gl-mr-0" }
      = render Pajamas::ButtonComponent.new(category: :tertiary, size: :small, button_options: @button_options.merge(class: 'btn-icon settings-toggle js-settings-toggle', 'aria-label': aria_label)) do
        .gl-sr-only = button_text
        = render Pajamas::AnimatedIconComponent.new(icon: :chevron_lg_right_down,
            variant: :current,
            is_on: @expanded,
            icon_options: { class: 'js-settings-icon' })
    .gl-grow
      %h2{ class: title_classes, data: { 'settings-block-title': '' } }
        = heading || @heading
      - if description || @description
        - if description.is_a?(String) || @description.is_a?(String)
          %p.gl-text-subtle.gl-m-0
            = description || @description
        - else
          .gl-text-subtle.gl-m-0
            = description || @description
  .settings-content
    .gl-pl-7.gl-mt-5{ class: "@sm/panel:gl-pl-8" }
      = body
